
import React, { Component } from 'react' // 引入react，引入Component，react提供得组件模板
// react里是jsx语法，jsx 就是html和js得混写，jsx语法就是遇到<>解析html，遇到{}解析js
 class App extends Component { // 声明了一个叫App得类继承了Component
//    constructor(props){ // props是其他组件传来得参数
//        super(props) // 表示继承  Component.call(this) // 在react中this指向当前组件得实例
//        this.state = {
//            name:"zhangsan"
//        }
//    }
// 在类组件中如果不写constructor他会隐式生成一个constructor，生成得constructor看不见，也不用管
state = { // state是声明状态得地方 ，state里定义得变量都叫状态
    name:"lisi",
    age:"20",
    arr:[
        {
            tit:"标题1",
            con:"内容1"
        },
        {
            tit:"标题2",
            con:"内容2"
        },
        {
            tit:"标题3",
            con:"内容3"
        },
    ],
    activeIndex:0 // 高亮的下标
}
fn(){ //所有自己写的函数都跟render平级
  alert(1)
}
checkindex(ind){
    console.log(ind)
    // this.state.activeIndex = ind
    // console.log(this.state.activeIndex);
    this.setState({ // 修改state里定义得东西只能通过  this.setState来改变
        activeIndex:ind
    })
}
render() { // render里return得东西就是页面上渲染出的内容，同时，render是一个生命周期函数
    return (
      <div className='wrap'>
          {/* <h3 onClick={()=>{alert(1)}}>{this.state.name}</h3>  点击事件得第一种办法，*/} 
          <h3 onClick={this.fn.bind(this)}>{this.state.name}</h3>
          <span>{this.state.age}</span>
          <hr></hr>
          {
              this.state.arr&&this.state.arr.length? this.state.arr.map((item,index)=>{
                    return <span key={index} onClick={this.checkindex.bind(this,index)} className={index==this.state.activeIndex?"active":""}>{item.tit}</span>
              }):"暂无数据"
          }
          {/* <div>{this.state.arr[this.state.activeIndex]}</div> */}
          {/* 在react的单花括号中不可以直接往页面输出对象或者数组 */}
          {
               this.state.arr&&this.state.arr.length?<div>{this.state.arr[this.state.activeIndex].con}</div>:"暂无数据"
          }
      </div>
     

    )
  }
}

export default App
